<script setup lang="ts">
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';

  // 控制显示隐藏
  const showQrcode = ref(true);
  // 记录拖拽状态
  const isDragging = ref(false);
  // 组件引用
  const wechatRef = ref<HTMLElement | null>(null);

  // 计算初始位置
  const getInitialPosition = () => {
    // 默认距离右边和底部20px
    return {
      x: window.innerWidth - 260, // 170 = 组件宽度(120) + padding(30) + 右边距(20)
      y: window.innerHeight - 270,
    };
  };

  // 记录位置 - 默认在右侧
  const position = ref(getInitialPosition());
  // 记录鼠标位置
  const mousePosition = ref({ x: 0, y: 0 });

  // 隐藏二维码
  function hideQrcode() {
    showQrcode.value = false;
  }

  // 开始拖拽
  function handleMouseDown(e: MouseEvent) {
    isDragging.value = true;
    mousePosition.value = {
      x: e.clientX - position.value.x,
      y: e.clientY - position.value.y,
    };
  }

  // 拖拽中
  function handleMouseMove(e: MouseEvent) {
    if (!isDragging.value) return;

    const newX = e.clientX - mousePosition.value.x;
    const newY = e.clientY - mousePosition.value.y;

    // 限制在视窗范围内
    const maxX = window.innerWidth - (wechatRef.value?.offsetWidth || 0);
    const maxY = window.innerHeight - (wechatRef.value?.offsetHeight || 0);

    position.value = {
      x: Math.min(Math.max(0, newX), maxX),
      y: Math.min(Math.max(0, newY), maxY),
    };
  }

  // 结束拖拽
  function handleMouseUp() {
    if (!isDragging.value) return;
    isDragging.value = false;

    // 计算最终位置（左右两侧）
    const centerX = window.innerWidth / 2;
    const targetX =
      position.value.x > centerX
        ? window.innerWidth - (wechatRef.value?.offsetWidth || 0) - 10
        : 10;

    // 添加回弹动画
    if (wechatRef.value) {
      wechatRef.value.style.transition = 'all 0.3s ease-in-out';
      position.value.x = targetX;

      // 动画结束后清除transition
      setTimeout(() => {
        if (wechatRef.value) {
          wechatRef.value.style.transition = '';
        }
      }, 300);
    }
  }

  // 监听窗口大小变化
  function handleResize() {
    const maxY = window.innerHeight - (wechatRef.value?.offsetHeight || 0);
    position.value.y = Math.min(position.value.y, maxY);

    // 如果在右侧，重新计算x坐标
    if (position.value.x > window.innerWidth / 2) {
      position.value.x = window.innerWidth - (wechatRef.value?.offsetWidth || 0) - 10;
    }
  }

  // 在组件挂载时初始化位置
  onMounted(() => {
    // 等待 DOM 更新后重新计算位置
    nextTick(() => {
      position.value = {
        x: window.innerWidth - (wechatRef.value?.offsetWidth || 0) - 10,
        y: window.innerHeight - (wechatRef.value?.offsetHeight || 0) - 10,
      };
    });

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
    window.removeEventListener('resize', handleResize);
  });
</script>

<template>
  <div
    ref="wechatRef"
    v-if="showQrcode"
    class="float-wechat dialog_content"
    :style="{
      left: `${position.x}px`,
      top: `${position.y}px`,
      cursor: isDragging ? 'grabbing' : 'grab',
    }"
    @mousedown="handleMouseDown"
  >
    <div class="float-wechat__close" @click.stop="hideQrcode">
      <el-icon>
        <Close />
      </el-icon>
    </div>
    <div class="float-wechat__cover dialog_header">
      <!--      <img src="@/assets/images/dashboard/wechat-main.png" alt="" />-->
      <img src="@/assets/images/dashboard/6061741245770_.pic.jpg" alt="" />
    </div>
    <div class="float-wechat__title">滨建培训</div>
  </div>
</template>

<style scoped lang="scss">
  .float-wechat {
    position: fixed;
    z-index: 999;
    width: 160px;
    height: 186px;
    padding: 15px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    text-align: center;
    user-select: none;
    touch-action: none;

    &::after {
      content: ' ';
      position: absolute;
      z-index: -2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('@/assets/images/dashboard/floatweachat.png') no-repeat;
      background-size: 100% 100%;
    }

    &__close {
      display: flex;
      position: absolute;
      z-index: 1;
      top: 10px;
      right: 10px;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      color: #333;
      font-size: 18px;
      cursor: pointer;

      &:hover {
        color: #165dff;
      }
    }

    &__cover {
      display: block;
      width: 115px;
      height: 115px;
      margin: 10px auto 16px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    &__title {
      color: #000;
      font-family: 'Alimama ShuHeiTi';
      font-size: 17px;
      font-weight: 700;
      line-height: 100%;
      text-align: center;
    }
  }
</style>
